<template>
  <view v-if="visible" class="p-pop-ups">
    <send-coupon
      v-if="coupon"
      :sign="coupon.sign"
      :send_coupon_params="coupon.send_coupon_params"
      :send_coupon_merchant="coupon.send_coupon_merchant"
      @sendcoupon="handleCustomEvent"
    >
      <view class="_send">
        <p-content :product="product" :coupon="coupon" @close="handleClose" />
      </view>
    </send-coupon>
    <p-content v-else :product="product" :coupon="coupon" @close="handleClose" @receive="handleChange" />
  </view>
</template>

<script>
import PContent from './p-content';

export default {
  name: 'PPopUps',
  components: {
    PContent
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    product: {
      type: Object,
      default: () => {}
    },
    coupon: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isClose: false
    };
  },
  created() {},
  methods: {
    handleCustomEvent({ detail }) {
      this.$store.dispatch('product/setCouponSend', detail).then(() => {
        this.handleChange();
      }).catch(() => {
        this.handleChange();
      });
    },
    handleChange() {
      if (this.isClose) {
        uni.navigateBack({
          delta: 1
        });
      } else {
        this.$emit('update:visible', false);
        this.$emit('change', 2);
      }
    },
    handleClose() {
      if (this.coupon) {
        this.isClose = true;
      } else {
        uni.navigateBack({
          delta: 1
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.p-pop-ups{
  width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: 1996; background-color: rgba(0, 0, 0, .7);
}
</style>
